import theme from '@/hoc/theme'
import role from '@/hoc/role'
import React from 'react'
import PropTypes from 'prop-types'


// const WrapComponent = () => {
//   return (
//     <div>
//       <h1>hoc高级函数的使用</h1>
//     </div>
//   )
// }
// export default theme(WrapComponent)

//装饰器@，对类式组件才有效果，并且装饰器和class之间不能有其他的语句，可以使用多个装饰器

const getVal = props => {
  const arr = []
  for(let k in props) {
    arr.push(<li key={k}>{k + '=' + props[k]}</li>)
  }
  return arr
}
const Child = props => {
  return (
    <ul>{getVal(props)}</ul>
  )
}
Child.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  flag: PropTypes.bool.isRequired,
  fn: PropTypes.func,
  a1: PropTypes.node, //任意数据类型
  a2: PropTypes.element, //jsx元素
  a3: PropTypes.oneOf(['admin', 'shop']).isRequired //oneOf表示必须是其一
}

@theme
@role(['vip', 'admin'])
class TestHoc extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>hoc高级函数的使用</h1>
        <Child name={'zs'} age={18} flag={true} a1={3} a2={<div>element表示jsx元素</div>} a3={'admin'} />
      </div>
    )
  }
}


export default TestHoc